<template>
    <el-dialog v-model="dialogFormVisible" title="版本管理">
        <div class="fun">
            <div class="left">
                <el-popconfirm title="请确认执行批量删除操作?" confirm-button-text="确认" cancel-button-text="取消"
                    @confirm="deleteData('batch')">
                    <template #reference>
                        <el-button type="danger" :disabled="ids.length == 0" plain :icon="Delete">批量删除</el-button>
                    </template>
                </el-popconfirm>
            </div>
        </div>
        <div class="table">
            <el-table empty-text="暂无数据" :show-overflow-tooltip="true" :data="tableData" v-loading="loading"
                element-loading-text="数据加载中..."
                :header-cell-style="{ background: 'var(--table-title-color)', color: 'var(--table-title-font-color)' }"
                @selection-change="handleSelectionChange" border>
                <el-table-column type="selection" width="55" :selectable="(row) => row.enableFlag === '1'" />
                <el-table-column prop="definitionNm" label="流程名称" />
                <el-table-column prop="version" label="版本">
                    <template #default="{ row }">
                        {{ 'v' + row.version.toFixed(1) }}
                    </template>
                </el-table-column>
                <el-table-column prop="remark" label="流程说明" />
                <el-table-column prop="enableFlag" label="启用标识">
                    <template #default="scope">
                        <el-switch v-model="scope.row.enableFlag" :active-value="'0'" :inactive-value="'1'"
                            inline-prompt active-text="已启用" inactive-text="未启用"
                            :disabled="scope.row.enableFlag === '0' || !enableFlag" @change="enable(scope.row.id)" />
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" />
                <el-table-column :fixed="$isMobile() ? false : 'right'" label="操作" width="170" column-align="center">
                    <template #default="scope">
                        <el-button text type="primary" size="small" :icon="View"
                            @click="router.push({ path: '/workflow/configure', query: { id: scope.row.id, disabled: true } })">详情</el-button>
                        <el-popconfirm title="请确认执行删除操作?" @confirm="deleteData(scope.row.id)"
                            v-if="scope.row.enableFlag === '1'">
                            <template #reference>
                                <el-button text type="primary" size="small" :icon="Delete">删除</el-button>
                            </template>
                        </el-popconfirm>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-config-provider>
            <el-pagination v-model:current-page="page.currentPage" v-model:page-size="page.pageSize"
                :page-sizes="[10, 20, 30, 40]" :pager-count="$isMobile() ? 5 : 7"
                :layout="$isMobile() ? 'prev,pager,next' : 'total, sizes, prev, pager, next, jumper'"
                :background="!$isMobile()" :total="page.total" @size-change="handleSizeChange"
                @current-change="handleCurrentChange" />
        </el-config-provider>
    </el-dialog>
</template>
<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import api from "@/api"
import { Delete, View } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter();
const dialogFormVisible = ref(false)
const loading = ref(false)
const page = ref({ pageSize: 10, pageNum: 1, currentPage: 0, total: 0 })
const tableData = ref([])
const ids = ref([])
const wfNo = ref()
const enableFlag = ref(true)

const init = (no) => {
    dialogFormVisible.value = true
    wfNo.value = no
    getData()
}
//获取数据
const getData = async () => {
    loading.value = true
    let params = { pageNum: page.value.pageNum, pageSize: page.value.pageSize, wfNo: wfNo.value }
    const res = await api.get('/workflow/definition/pageList', params)
    if (res.data.code === 200) {
        tableData.value = res.data.data.records
        page.value.currentPage = res.data.data.current
        page.value.total = res.data.data.total
    } else {
        ElMessage.error(res.data.msg)
    }
    loading.value = false
}

//切换页
const handleSizeChange = (val) => {
    page.value.pageSize = val
    getData()
}
const handleCurrentChange = (val) => {
    page.value.pageNum = val
    getData()
}

const handleSelectionChange = (val) => {
    let idArr = val.map(item => item.id)
    ids.value = idArr
}

//删除
const deleteData = (id) => {
    let params
    if (id !== 'batch') {
        params = [id]
    } else {
        if (ids.value.length === 0) {
            ElMessage.warning('请先选择需要删除的行，再做操作!')
            return
        }
        params = ids.value
    }
    api.post('/workflow/definition/delete', params).then(res => {
        if (res.data.code === 200) {
            ElMessage.success(res.data.msg)
            getData()
        } else {
            ElMessage.error(res.data.msg)
        }
    })
}

const emit = defineEmits(['serversUpdated']);
const enable = async (id) => {
    enableFlag.value = false
    const res = await api.post('/workflow/definition/enable', { id })
    if (res.data.code === 200) {
        getData()
        ElMessage.success(res.data.msg)
        emit('serversUpdated')
    } else {
        ElMessage.error(res.data.msg)
    }
    enableFlag.value = true
}

defineExpose({
    init
});

</script>
<style lang="less" scoped></style>